<template>
	<div class="layout">
		<el-container>
			<el-aside class="list">
				<ChatRoom @selectChatRoom="handleSelectChatRoom"/>
			</el-aside>
			<el-container>
				<router-view :currentChatRoom="currentChatRoom"/>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import ChatRoom from "@/views/ChatRoom.vue";
import {useRouter} from "vue-router";
import {ref} from "vue";

export default {
	components: {
		ChatRoom,
	},
	setup() {
		const router = useRouter();
		const currentChatRoom = ref({});
		const handleSelectChatRoom = (room) => {
			currentChatRoom.value = room;
			localStorage.setItem('currentChatRoom', JSON.stringify(room));
			router.push({
				name: 'chat',
				params: {
					id: room.id
				}
			});
		};
		return {
			handleSelectChatRoom,
			currentChatRoom
		};
	}
};
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
	user-select: none;
}


.layout {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, .3);
	backdrop-filter: blur(10px);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.layout .el-container {
	height: 100%;
}


.list {
	padding: 0;
	min-width: 200px;
	width: 20%;
	max-width: 250px;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
}
</style>